<template>
  <el-dialog :title="title" :visible.sync="dialogFormVisible">
    <el-form ref="modalForm" :model="dataSource" label-position="right" label-width="100px">
      <el-descriptions class="margin-top" :title="titleKey" :column="2" border>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user" />
            绑定的用户名
          </template>
          <el-form-item
            label-width="0"
            style="margin: 0 auto"
          >
            <el-select
              v-model="dataSource.userCode"
              class="input_s"
              :value="dataSource.userCode"
              filterable
              default-first-option
              placeholder="请选择绑定的用户名"
            >
              <el-option
                key="0"
                label=""
                value=""
              />
              <el-option
                v-for="item in userDataArray"
                :key="item.userCode"
                :label="item.userName"
                :value="item.userCode"
              />
            </el-select>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-mobile-phone" />
            员工类型
          </template>
          <el-form-item
            prop="employTypeCode"
            label-width="0"
            style="margin: 0 auto"
            :rules="[
              { required: true, message: '员工类型不能为空',trigger:'blur,change'}
            ]"
          >
            <el-select
              v-model="dataSource.employTypeCode"
              class="input_s"
              :value="dataSource.employTypeCode"
              filterable
              default-first-option
              placeholder="请选择员工类型"
            >
              <el-option
                key="0"
                label=""
                value=""
              />
              <el-option
                v-for="item in employeeTypeList"
                :key="item.employTypeCode"
                :label="item.employTypeName"
                :value="item.employTypeCode"
              />
            </el-select>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-mobile-phone" />
            年龄
          </template>
          <el-form-item
            prop="employAge"
            label-width="0"
            style="margin: 0 auto"
            :rules="[
              { required: true, message: '年龄不能为空',trigger:'blur,change'}
            ]"
          >
            <el-input v-model="dataSource.employAge" class="input_s" autocomplete="off">
              <span slot="suffix">岁</span>
            </el-input>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-mobile-phone" />
            部门信息
          </template>
          <el-form-item
            prop="depCode"
            label-width="0"
            style="margin: 0 auto"
            :rules="[
              { required: true, message: '部门信息不能为空',trigger:'blur,change'}
            ]"
          >
            <el-select
              v-model="dataSource.depCode"
              class="input_s"
              :value="dataSource.depCode"
              filterable
              default-first-option
              placeholder="请选择部门"
            >
              <el-option
                key="0"
                label=""
                value=""
              />
              <el-option
                v-for="item in departmentInfo"
                :key="item.depCode"
                :label="item.depName"
                :value="item.depCode"
              />
            </el-select>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-mobile-phone" />
            性别
          </template>
          <el-form-item
            prop="employGender"
            label-width="0"
            style="margin: 0 auto"
            :rules="[
              { required: true, message: '员工性别不能为空',trigger:'blur,change'}
            ]"
          >
            <el-radio-group v-model="dataSource.employGender">
              <el-radio value="1" name="boy" :label="1">🙋‍♂️男</el-radio>
              <el-radio value="0" name="girl" :label="0">🙋‍♀️女</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item v-if="modalType === 'edit'">
          <template slot="label">
            <i class="el-icon-mobile-phone" />
            工作天数
          </template>
          <el-form-item
            prop="employWorkTimes"
            label-width="0"
            style="margin: 0 auto"
            :rules="[
              { required: true, message: '类型名称不能为空',trigger:'blur,change'}
            ]"
          >
            <el-input v-model="dataSource.employWorkTimes" disabled class="input_s" autocomplete="off">
              <span slot="suffix">天</span>
            </el-input>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-mobile-phone" />
            员工状态
          </template>
          <el-form-item
            prop="employStatus"
            label-width="0"
            style="margin: 0 auto"
            :rules="[
              { required: true, message: '员工状态不能为空',trigger:'blur,change'}
            ]"
          >
            <el-select
              v-model="dataSource.employStatus"
              class="input_s"
              :value="dataSource.employStatus"
              filterable
              default-first-option
              placeholder="请选择员工状态"
            >
              <el-option
                key="0"
                label=""
                value=""
              />
              <el-option
                v-for="item in employeeYgztList"
                :key="item.code"
                :label="item.value"
                :value="item.code"
              />
            </el-select>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-mobile-phone" />
            工作形式
          </template>
          <el-form-item
            prop="employWorkType"
            label-width="0"
            style="margin: 0 auto"
            :rules="[
              { required: true, message: '员工工作形式不能为空',trigger:'blur,change'}
            ]"
          >
            <el-select
              v-model="dataSource.employWorkType"
              class="input_s"
              :value="dataSource.employWorkType"
              filterable
              default-first-option
              placeholder="请选择工作形式"
            >
              <el-option
                key="0"
                label=""
                value=""
              />
              <el-option
                v-for="item in employeeYggzlxList"
                :key="item.code"
                :label="item.value"
                :value="item.code"
              />
            </el-select>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-mobile-phone" />
            工作状态
          </template>
          <el-form-item
            prop="employWorkStatus"
            label-width="0"
            style="margin: 0 auto"
            :rules="[
              { required: true, message: '员工工作状态不能为空',trigger:'blur,change'}
            ]"
          >
            <el-select
              v-model="dataSource.employWorkStatus"
              class="input_s"
              :value="dataSource.employWorkStatus"
              filterable
              default-first-option
              placeholder="请选择工作形式"
            >
              <el-option
                key="0"
                label=""
                value=""
              />
              <el-option
                v-for="item in employeeYggzztList"
                :key="item.code"
                :label="item.value"
                :value="item.code"
              />
            </el-select>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-mobile-phone" />
            入职时间
          </template>
          <el-form-item
            prop="employEntryTime"
            label-width="0"
            style="margin: 0 auto"
            :rules="[
              { required: true, message: '入职时间不能为空',trigger:'blur,change'}
            ]"
          >
            <el-date-picker
              v-model="dataSource.employEntryTime"
              type="date"
              :default-value="new Date()"
              placeholder="选择日期"
              format="yyyy - MM - dd"
              value-format="yyyy-MM-dd HH:mm:ss"
            />
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-mobile-phone" />
            离职时间
          </template>
          <el-form-item
            label-width="0"
            style="margin: 0 auto"
          >
            <el-date-picker
              v-model="dataSource.employDepartureTime"
              type="date"
              :default-value="new Date()"
              placeholder="选择日期"
              format="yyyy - MM - dd"
              value-format="yyyy-MM-dd HH:mm:ss"
            />
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-tickets" />
            备注信息
          </template>
          <el-form-item
            label-width="0"
            style="margin: 0 auto"
          >
            <el-input v-model="dataSource.memo" type="textarea" show-word-limit class="input_s" autocomplete="off" />
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-tickets" />
            离职原因
          </template>
          <el-form-item
            label-width="0"
            style="margin: 0 auto"
          >
            <el-input v-model="dataSource.employDepartureResion" type="textarea" show-word-limit class="input_s" autocomplete="off" />
          </el-form-item>
        </el-descriptions-item>
      </el-descriptions>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="handleConfirm('modalForm')">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { addOneEmpInfo, modifyOneEmpInfo } from '@/api/ht/yytgl/yggl/ygxxgl'
const { Message } = require('element-ui')
const { getAllUserList } = require('@/api/user')

export default {
  name: 'Modal',
  props: {
    employeeInfo: {
      type: Object,
      default: () => {
        return {
          employCode: '',
          id: '',
          employTypeCode: '',
          userName: '',
          depCode: '',
          employAge: '',
          employGender: '',
          employEntryTime: '',
          employDepartureTime: '',
          employDepartureResion: '',
          employStatus: '',
          employWorkType: '',
          employWorkStatus: '',
          creat_time: '',
          update_time: '',
          memo: ''
        }
      }
    },
    departmentInfo: {
      type: Array,
      default: () => []
    },
    employeeTypeList: {
      type: Array,
      default: () => []
    },
    employeeQjlxList: {
      type: Array,
      default: () => []
    },
    employeeYgztList: {
      type: Array,
      default: () => []
    },
    employeeYggzztList: {
      type: Array,
      default: () => []
    },
    employeeYggzlxList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      title: '员工信息详情',
      titleKey: '',
      formLabelWidth: '100px', // 表单输入框字段宽度
      dialogFormVisible: false, // 对话框是否显示
      userDataArray: [], // 用户列表数组
      modalType: 'add',
      dataSource: { // 数据源
      }
    }
  },
  watch: {
    employeeInfo(newdata, prevdata) {
      this.dataSource = newdata
      this.titleKey = '员工编号：[' + this.dataSource.id + ']'
    }
  },
  methods: {
    checkModelType(type) {
      this.modalType = type
      // 展示对话框
      this.dialogFormVisible = true
      // 判断是编辑还是新增
      if (type === 'add') {
        // 置空
        this.title = '员工信息'
        this.dataSource = {}
      }
      // 编辑情况下 获取 用户列表信息
      this.getUserListInfoHandle()
    },
    handleConfirm(formName) {
      const type = this.modalType
      console.log(this.dataSource)
      // 判断是编辑还是新增
      if (type === 'add') {
        // 调用新增请求
        this.addEmpInfoHandle(formName)
      } else {
        // 调用修改请求
        this.modifyEmpInfoHandle(formName)
      }
    },
    getUserListInfoHandle() {
      this.getUserListinfo()
    },
    addEmpInfoHandle(formName) {
      console.log(formName)
      this.$refs[formName].validate((valid) => {
        console.log(valid)
        if (valid) {
          this.addEmpInfo()
        } else {
          console.log('表单缺少数据或者不符合要求')
          return false
        }
      })
    },
    modifyEmpInfoHandle(formName) {
      console.log(this.dataSource)
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.modifyEmpInfo()
        } else {
          console.log('表单缺少数据或者不符合要求')
          return false
        }
      })
    },
    async getUserListinfo() {
      const res = await getAllUserList()
      const data = res.data.main
      console.log(data)
      this.userDataArray = data
    },
    async addEmpInfo() {
      const res = await addOneEmpInfo(this.dataSource)
      const resp = res.data.respOutMsgHeader
      if (resp.respCode === 200) {
        Message({
          message: resp.msg || 'Error',
          type: 'success',
          duration: 2 * 1000
        })
        this.dialogFormVisible = false
        this.reflushDataHandle()
      } else {
        Message({
          message: resp.msg || 'Error',
          type: 'error',
          duration: 2 * 1000
        })
      }
    },
    async modifyEmpInfo() {
      const res = await modifyOneEmpInfo(this.dataSource)
      const resp = res.data.respOutMsgHeader
      if (resp.respCode === 200) {
        Message({
          message: resp.msg || 'Error',
          type: 'success',
          duration: 2 * 1000
        })
        this.dialogFormVisible = false
        this.reflushDataHandle()
      } else {
        Message({
          message: resp.msg || 'Error',
          type: 'error',
          duration: 2 * 1000
        })
      }
    },
    reflushDataHandle() {
      // 调用父组件方法刷新数据
      this.$emit('reflushDataHandle')
    }

  }
}
</script>

<style scoped>
  .input_s >>> .el-input__inner {
    -webkit-appearance: none;
    background-color: #FFF;
    background-image: none;
    border-radius: 4px;
    border: 0px;
    width: 100%;
  }
</style>
